<template>
  <div style="height: 100%; min-height: 100vh">
    <div class="cus_search">
      <div class="cus_search_left" style="width: calc(100% - 2.625rem)">
        <img src="@/assets/img/search for@2x.png" alt=""/>
        <form action="" @submit="formSubmit">
          <input @input="Search" type="search" v-model="value" placeholder="搜索科室、医生"/>
        </form>

        <img src="@/assets/img/delete@2x.png" alt="" v-if="value.length > 0" @click="emptyValue"/>
      </div>
      <div class="cus_search_right" @click="back">取消</div>
    </div>
    <div class="result_tip" v-if="result.doctors.length > 0 && value.length > 0">
      找到“{{ value }}”有关的{{ result.doctors.length }}个医生
    </div>
    <!-- <div class="history_box" v-if="value.length < 1 && historyList.length > 0">
      <div class="history_box_title">
        <div>历史搜索</div>
        <div @click="delHistoryAll">
          <img src="@/assets/img/my doctor_delete@2x.png" alt="" />
        </div>
      </div>
      <div class="history_box_list">
        <div class="li" v-for="(his, idx) in historyList" @click="historySearch(his)">
          {{ his }}
          <img src="@/assets/img/delete@2x.png" alt="" @click.stop="delHistory(idx)" />
        </div>
      </div>
    </div> -->
    <template v-if="result.doctors.length > 0 || result.depts.length > 0">
      <div class="result_tit">科室</div>
      <div class="dept_list" v-for="(dept, index) in result.depts" @click="goAppointmentNext(dept)">
        {{ dept.deptName }}
      </div>
      <div class="result_tit">医生</div>

      <div class="doctor_item" v-for="(doc, index) in result.doctors" @click="goDoctor(doc)">
        <div class="doctor_item_left">
          <img :src="doc.avatarUrl?doc.avatarUrl:require('@/assets/img/img_male.png')" :onerror="errorImg01" alt=""
               v-if="doc.sex == '1'"/>
          <img :src="doc.avatarUrl?doc.avatarUrl:require('@/assets/img/icon_female.png')" :onerror="errorImg02" alt=""
               v-else/>
        </div>
        <div class="doctor_item_right">
          <div class="doctor_item_right_1">
            {{ doc.name }} <span v-if="doc.team">{{ doc.team }}</span>
          </div>
          <div class="doctor_item_right_2">
            {{ doc.jobTitle }}
          </div>
          <div class="doctor_item_right_3" v-if="doc.memo.length > 0">
            <span v-for="i in doc.memo">
              {{ i }}
            </span>

          </div>
          <div class="doctor_item_right_5" v-if="doc.desc">

            {{ doc.desc }}
          </div>

        </div>
      </div>
    </template>
    <template v-if="noresult">
      <div class="noresult">
        <img src="@/assets/img/img_no results@2x.png" alt=""/>
        <div>暂无结果，请重新输入</div>
      </div>
    </template>
  </div>
</template>
<script>
import {Search} from "@/api/api";

export default {
  data() {
    return {
      value: "",
      result: {
        depts: [],
        doctors: [],
      },
      noresult: false,
      historyList: [],
      errorImg01: 'this.src="' + require("@/assets/img/img_male.png") + '"',
      errorImg02: 'this.src="' + require("@/assets/img/icon_female.png") + '"',
    };
  },
  created() {
    if (window.localStorage.getItem("historyList")) {
      this.historyList = JSON.parse(window.localStorage.getItem("historyList"));
    }
  },
  methods: {
    // 阻止form提交
    formSubmit(event) {
      event.preventDefault();
    },
    Search(event) {
      // if (this.historyList.indexOf(this.value) == -1) {
      //   this.historyList.push(this.value);
      //   window.localStorage.setItem(
      //     "historyList",
      //     JSON.stringify(this.historyList)
      //   );
      // }
      event.preventDefault();
      this.GetReservationListByKeyWord(this.value);
      return false;
    },
    // 跳转科室
    goAppointmentNext(dept) {
      this.$router.push({path: "/appointment_next", query: dept});
    },
    // 跳转预约时间
    goDoctor(item) {
      window.localStorage.removeItem("appoIdx")
      this.$router.push({path: "/doctor_details", query: item});
    },
    // 关键词搜索
    GetReservationListByKeyWord(KeyWord) {
      var data = {
        text: KeyWord,
      };
      Search(data).then((res) => {
        if (res.code == 200) {

          var depts = res.data.depts
          var doctors = res.data.doctors == null ? "" : res.data.doctors
          doctors.forEach(element => {
            if (element.memo) {
              element.memo = element.memo.split("|")
            } else {
              element.memo = []
            }
          });
          this.result.depts = depts
          this.result.doctors = doctors

          console.log(this.result)
          if (depts.length < 1 && doctors.length < 1) {
            this.noresult = true;
          } else {
            this.noresult = false;
          }
        }
      });
    },
    // 历史记录搜索
    historySearch(his) {
      this.GetReservationListByKeyWord(his);
    },
    // 删除单个搜索历史
    delHistory(idx) {
      this.historyList.splice(idx, 1);
      window.localStorage.setItem("historyList", this.historyList);
    },
    // 删除全部搜索历史
    delHistoryAll() {
      window.localStorage.setItem("historyList", "");
      this.historyList = window.localStorage.getItem("historyList");
    },
    emptyValue() {
      this.value = "";
    },
    back() {
      this.$router.go(-1);
    },
  },
  watch: {
    value(val) {
      if (val.length == 0) {
        this.result = {
          depts: [],
          doctors: [],
        };
      }
    },
  },
};
</script>
<style scoped>
.cus_search {
  width: calc(100% - 2rem);
  height: 2.125rem;
  padding: 0.3125rem 1rem;
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  color: #131a2a;
}

.cus_search_left {
  width: calc(100% - 1.125rem);
  height: 2.125rem;
  padding: 0 0.5625rem;
  display: flex;
  align-items: center;
  background: rgba(247, 250, 253, 1);
  border-radius: 1.125rem;
}

.cus_search_left > img {
  width: 1.375rem;
  height: 1.375rem;
}

.cus_search_left > img:nth-of-type(1) {
  margin-right: 0.375rem;
}

.cus_search_left form {
  width: calc(100% - 3.125rem);
  padding: 0px 0.1875rem;
  height: 100%;
}

.cus_search_left input {
  width: 100%;
  /* padding: 0px 0.1875rem; */
  height: 100%;
  border: none;
  background: rgba(247, 250, 253, 1);
  outline: none;
  font-size: 0.875rem;
}

.cus_search_right {
  width: 2.625rem;
  text-align: right;
}

.result_tip {
  width: 100%;
  height: 2.5rem;
  background: rgba(90, 173, 251, 1);
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
  line-height: 2.5rem;
}

.history_box {
  padding: 0.9375rem 1rem;
  width: calc(100% - 2rem);
}

.history_box_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9375rem;
  color: #131a2a;
  font-weight: bold;
}

.history_box_title img {
  display: block;
  width: 1rem;
  height: 1.0625rem;
}

.history_box_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.history_box_list .li {
  position: relative;
  height: 1.875rem;
  background: rgba(243, 247, 251, 1);
  border-radius: 5px;
  font-size: 0.9375rem;
  padding: 0 0.9375rem;
  line-height: 1.875rem;
  margin: 0.625rem 0.9375rem 0.625rem 0rem;
}

.history_box_list .li img {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  position: absolute;
  top: -7px;
  right: -7px;
}

.result_tit {
  width: calc(100% - 1.0625rem);
  padding-left: 1.0625rem;
  height: 2.75rem;
  line-height: 2.75rem;
  background-color: #f7fafd;
  font-size: 1rem;
  color: #131a2a;
}

.doctor_list {
  width: calc(100% - 1.625rem);
  height: 5rem;
  padding: 0.8125rem;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 1);
  /* box-shadow: 0px 0px 0.9375rem 0px rgba(174, 206, 254, 0.3); */
  border-radius: 0.375rem;
  border-bottom: 0.0625rem solid #e7ecf5;
}

.doctor_item {
  width: calc(100% - 3.625rem);
  margin: 0 1rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem 0.8125rem;
  font-size: 0.875rem;
  box-shadow: 0.00rem 0.00rem 0.9375rem 0.00rem rgba(174, 206, 254, 0.3);
  border-radius: 0.375rem;
  background-color: #fff;
  position: relative;
  display: flex;

}

.doctor_item .doctor_item_left {
  width: 4.25rem;
  margin-right: 0.625rem;


}

.doctor_item .doctor_item_left > img {
  width: 4.25rem;
  height: 4.25rem;
  margin-right: 0.625rem;
}


.doctor_item .doctor_item_right {
  width: calc(100% - 5rem);
  font-size: 0.8125rem;
}

.doctor_item .doctor_item_right .doctor_item_right_1 {
  line-height: 1.625rem;
  height: 1.625rem;
  font-size: 1.00rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #131A2A;
  display: flex;
  align-items: center;

}

.doctor_item .doctor_item_right .doctor_item_right_1 span {
  display: inline-block;
  padding: 0 0.44rem;
  height: 1.1875rem;
  line-height: 1.1875rem;
  background: rgba(255, 202, 127, 0.25);
  border-radius: 0.19rem;
  font-size: 0.75rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FF9C32;
  margin-left: 0.625rem;
}

.doctor_item .doctor_item_right .doctor_item_right_2 {
  line-height: 1.5rem;
  height: 1.5rem;

}

.doctor_item .doctor_item_right .doctor_item_right_3 {
  line-height: 1.5rem;
  height: 1.5rem;


}

.doctor_item .doctor_item_right .doctor_item_right_3 span {
  display: inline-block;
  padding: 0.00rem 0.375rem;
  height: 1.19rem;
  line-height: 1.1875rem;
  background: rgba(68, 142, 255, .1);
  border-radius: 0.19rem;
  font-size: 0.75rem;
  color: #448EFF;
  margin-right: 0.75rem;
}

.doctor_item .doctor_item_right .doctor_item_right_5 {
  line-height: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #a4adbe;
}

.dept_list {
  width: calc(100% - 1.0625rem);
  padding-left: 1.0625rem;
  height: 2.75rem;
  line-height: 2.75rem;
  background-color: #fff;
  font-size: 0.9375rem;
  color: #131a2a;
}

.noresult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  height: 31.25rem;
}

.noresult img {
  display: block;
  width: 12.5rem;
  height: 9.75rem;
}
</style>
